import React, { PropTypes, Component } from 'react';
import Table from './MyTable'
import Column from './Column'
import {myAjax, myAjaxJson, getAuthShop, ROOTURL_TABLE, ROOTPATH, ROOTURL,} from './../publicAPI/publicAPI';
import styles from './SimpleTable.css';

export default React.createClass({
  getInitialState: function() {
    let date = new Date();
    return {
      year: date.getFullYear(),
      month: date.getMonth() + 1,
      day: date.getDate(),
      //shopNames: [],
      idForServ: [{}],
      idForAssist: [{}],
      processData: [{}],
      shopsForAdm: [],
      shopSelect: '请选择门店',
      allServantsArray: [],
      transformIdToName: {},
    };
  },
  componentWillMount: function() {
    
  },
  componentDidMount: function() {
    let _this = this;
    //获取有权限的门店列表
    getAuthShop(null, (data)=>{
      console.log(data);
      let transIdToShopName = {};
      let shopsForAdm = data.filter((shopObject) => {
        transIdToShopName[shopObject.id] = shopObject.dname;
        return !shopObject.dd
      });
      _this.setState({
        shopsForAdm: shopsForAdm,
      });
    });
    //获取所有服务人员
    myAjaxJson(ROOTURL +'servant/profile/search.api', 'POST', {}, function(data) {
      console.log(data);     
      this.setState({
        allServantsArray: data,
      });
    }.bind(_this), function(error) {})
  },
  handleClick: function() {
    let _this = this;
    let yearSelect   = this.state.year,
        monthSelect  = this.state.month,
        daySelect    = this.state.day;

    if((/^2\d{3}$/.test(yearSelect)) || (/^0?[1-9]{1}$|^1[0-2]$/.test(monthSelect))) {
      if(daySelect == '') {
        // 不具体到日期，按月度统计
      } else if((/^0?[1-9]{1}$|^[1-3][0-9]$/).test(daySelect)) {
        // 具体到日期
      } else {
        console.log(daySelect);
        alert('日期选择格式错误');
      }
    } else {
      console.log(yearSelect);
      console.log(monthSelect);
      alert("年、月选择不能为空或格式错误");
    }	
	},
  onChange: function(e) {
    let _this = this;

    this.setState({
      shopSelect: e.target.value,
    }, () => {
      _this.filterServ();
    });
  },
  filterServ: function() {
    let _this = this;
    let shopSelect = this.state.shopSelect;
    let allServantsArray = this.state.allServantsArray;
    let idForServ = [], idForAssist = [];
    let transformIdToName = {};
    allServantsArray.map((servantObject, idx) => {
      if(!servantObject.dd) {
        if(shopSelect == '请选择门店'||servantObject.shopId == shopSelect) {
          if(servantObject.meta.isAssistant) {
            idForAssist.push(servantObject.id);
            transformIdToName[servantObject.id] = servantObject.meta.name||'无名';
          } else {
            idForServ.push(servantObject.id);
            transformIdToName[servantObject.id] = servantObject.meta.name||'无名';
          }
        }
      }
    });
    this.setState({
      idForServ: idForServ,
      idForAssist: idForAssist,
      transformIdToName: transformIdToName,
    }, () => {
      _this.getData();
    });
  },
  getData: function() {
    console.log(this.state.idForServ);
    console.log(this.state.idForAssist);    
  },
  handleKeyPress: function(e) {
    if(e.which == 13) {
      this.handleClick();
    }
  },
  render: function() {
    return (
      <div>
      	<div>
          <select value={this.state.shopSelect} onChange={this.onChange} className={styles['select']}>
            <option value="请选择门店">请选择门店</option>
            {
              this.state.shopsForAdm.map((shopObject) => {
                return (
                  <option value={shopObject.id} key={shopObject.id}>{shopObject.dname}</option>
                );
              })
            }
          </select>
      		<label >
      		  <input type="text" placeholder="年" style={{width: '50'}} onChange={(e)=>{this.setState({year: e.target.value})}} />-
            <input type="text" placeholder="月" style={{width: '50'}} onChange={(e)=>{this.setState({month: e.target.value})}} />-
            <input type="text" placeholder="日" style={{width: '50'}} onChange={(e)=>{this.setState({day: e.target.value})}} />
      		</label>
			    <button type="button" className={styles.button}>确定</button>
        </div>

        <div>
          <table>
            <tbody> 
              <tr>
                <th style={{padding: '20px'}}>理发师</th>
                <th style={{padding: '20px'}}>1</th>
                <th style={{padding: '20px'}}>2</th>
                <th style={{padding: '20px'}}>3</th>
                <th style={{padding: '20px'}}>一直到</th>
                <th style={{padding: '20px'}}>31</th>
              </tr>
              <tr>
                <td style={{padding: '20px'}}>这里是理发师姓名</td>
                <td style={{padding: '20px'}}>500(理发师当天所有服务的总提成)</td>
                <td style={{padding: '20px'}}>2</td>
                <td style={{padding: '20px'}}>3</td>
                <td style={{padding: '20px'}}>4</td>
                <td style={{padding: '20px'}}>500</td>
              </tr>
            </tbody>
          </table>
        </div>        
      </div>
    );
  }
});


